<template>
	<div>
			<el-row :span="24" style="margin:26px 0 0;">
				<div style="display: flex;justify-content: flex-start;">
					<p @click="navToPlatform()" class="tabHeader">系统公告</p>
					<p @click="navToRuleText()" class="tabHeader">规则文案</p>
					<p @click="navToHelpCenter()" class="tabHeader">帮助中心</p>
					<p @click="navToCityNotice()" class="tabHeader">城主公告</p>
					<p class="tabHeader" style="color: #409eff;border-bottom: 0;">新闻发布</p>
				</div>
				<el-row style="margin-top: 20px;">
					<el-button @click="edit('add')"  class="btnPad " type="primary">新增</el-button>
				</el-row>
				<div style="margin-top: 20px;">
					<el-table
					        :data="pageInfo.dtos"
					        v-loading="table_loading"
					        element-table_loading-text="加载中"
					        stripe
					        style="width: 100%">
					
					    <el-table-column
					            prop="noticeCode"
					            label="序号">
					    </el-table-column>
					    <el-table-column
					            prop="noticeTitle"
					            label="公告名称">
					    </el-table-column>
					    <el-table-column
					            prop="secTitle"
					            label="副标题">
					    </el-table-column>
						<el-table-column
						        prop="secTitle"
						        label="发布时间">
						</el-table-column>
					    <el-table-column label="操作" width="250">
					        <template scope="scope">
					            <el-button
					                    size="small"
					                    type="primary" @click="edit(scope.row.noticeCode)">编辑
					            </el-button>
					            <el-button
					                    size="small"
					                    type="danger" @click="handleDelete(scope.row.noticeCode)">删除
					            </el-button>
					        </template>
					    </el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange"
					            :current-page="pageInfo.pageNum"
					            :page-size="pageInfo.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo.count">
					    </el-pagination>
					</div>
				</div>
			</el-row>
			
		</div>
</template>

<script>
	export default {
	    data() {
	        return {
	            table_loading:false,
				tableData: [],
				isActive: true,
				formInline: {
				    pageNum:1,
				    pageSize: 10,
				    sort:'CRE_TIME',
				    desc:'DESC',
				    noticeTitle:'',
					noticeStat: '3'
				},
				pageInfo: {
				    pageNum: 1,
				    pageSize: 10,
				    count: 1,
				    dtos: []
				},
	        }
	    },
	    created(){
	       
	    },
	    activated() {
	       this.fetchData(this.pageInfo.pageNum);
	    },
	    methods: {
	      navToHelpCenter() {
	      	this.$router.push('/official/help_center')
	      },
	      navToPlatform() {
	      	this.$router.push('/official/platform_rule')
	      },
		  navToRuleText() {
		  	this.$router.push('/official/rule_text')
		  },
		  navToCityNotice() {
		  	this.$router.push('/official/city_notice')
		  },
		  edit(id){
		  	/**
		  	 * 方法说明
		  	 * author: liuchen
		  	 * description: 添加/编辑城主公告
		  	 * @param 
		  	 * @return 
		  	 * @createTime: 2020-9-18 09:55:40
		  	 */
		      this.$router.push('/official/newslistDetail/' + id)
		  },
		  fetchData (page = 1) {
		  	/**
		  	 * 方法说明
		  	 * author: liuchen
		  	 * description: 
		  	 * @param 获取公告列表
		  	 * @return 
		  	 * @createTime: 2020-8-8 16:15:18
		  	 */
		      this.table_loading = true;
		      this.pageInfo.pageNum = page
		      this.formInline.pageNum = this.pageInfo.pageNum
		      this.dataApi.ajax('selectPageSysNotice', this.formInline, res => {
		          this.table_loading = false;
		          if (res.responseType === 'S') {
		              this.pageInfo = res
		          }
		      });
		  
		  },
		  handleCurrentChange(val) {
		      this.fetchData(val)
		  },
		  handleDelete(id) {
		      this.confirmDel(() => {
		          this.dataApi.ajax('delSysNotice', {noticeCode: id}, res => {
		              //console.log(res)
		              if (res.responseType === 'S') {
		                  this.showMsg('删除成功')
		                  this.fetchData(this.pageInfo.pageNum)
		              }
		          });
		      })
		  },
	    }
	}
</script>

<style>
	.tabHeader {
			width: 100px;
			text-align: center;
			display: inline-block;
			padding: 5px 10px;
			margin: 0;
			border: 1px solid #909399;
			border-right: 0;
			cursor: pointer;
		}
	
		.tabHeader:last-child {
			width: 100px;
			text-align: center;
			display: inline-block;
			padding: 5px 10px;
			margin: 0;
			border: 1px solid #909399;
		}
	
		.el-radio-button__orig-radio:checked+.el-radio-button__inner {
			border-bottom-color: #FFFFFF;
			background-color: #FFFFFF;
			color: #20a0ff;
		}
	
		.btnPad {
			width: 120px;
			text-align: center;
		}
	
		.btnChoose {
			width: 120px;
			text-align: center;
			border: 1px solid #20a0ff;
			color: #20a0ff;
		}
</style>
